<template>
    <div class="logisticsWrapper">
    <v-header title="物流详情" ref="header"></v-header>
        <scroll ref="scroll" style="overflow: hidden;height: 100%"
            :style="{height: scrollHeight + 'px'}">
            <div>
                <div class="topWrapper">
                    <div class="imageTop">
                        <img :src="goodsImage" alt="">
                    </div>
                    <div class="logisticsDetail">
                        <div class="logisticsStatus">
                            <p>{{goodsName}}</p>
                        </div>
                        <div class="logisticsOrderNum">
                            <p>运单号：{{awbIdTemp}}</p>
                        </div>
                        <div class="logisticsCourier">
                            <p>信息来源：普通快递</p>
                        </div>
                    </div>
                </div>
                <div class="lineWrapper">
                    <flexbox :gutter="0" class="orderflexbox">
                        <flexbox-item>
                            <div class="flex-demo-oa">
                                <span>|</span>&nbsp;物流详情
                            </div>
                        </flexbox-item>
                    </flexbox>
                </div>
                <div class="logisticsDescContent">
                    <timeline>
                        <timeline-item v-for="(item) in logisticsList" :key="item.index">
                            <p class="contextWrapper">{{item.AcceptStation}}</p>
                            <p class="timeWrapper">{{item.AcceptTime}}</p>
                        </timeline-item>
		            </timeline>
                </div>
            </div>
        </scroll>
    </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'
import axios from '@/api/axiosApi'
import { Flexbox, FlexboxItem, Timeline, TimelineItem } from 'vux'
export default {
  data () {
    return {
      scrollHeight: '500',
      logisticsList: [],
      awbIdTemp: '',
      textColor1: '',
      textColor2: '',
      goodsImage: '',
      goodsName: ''
    }
  },
  created () {
    this.goodsImage = sessionStorage.getItem('shoppingImage')
    this.goodsName = sessionStorage.getItem('goodsName')
    this.getLogisticsInfo()
    this.awbIdTemp = this.$route.params.awbId
  },
  methods: {
    getLogisticsInfo () {
      axios.get(this, '/v1/logistics/' + this.$route.params.awbId, null, (data) => {
        this.logisticsList = data.data.Traces
      })
    }
  },
  components: {
    VHeader,
    Scroll,
    Flexbox,
    FlexboxItem,
    Timeline,
    TimelineItem,
    axios
  },
  mounted () {
    this.scrollHeight = window.innerHeight - 64
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
.logisticsWrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $color-background;
  z-index: 101;
  height: 100%;
}


.topWrapper {
    padding-top 10px
    padding-left 15px
    padding-right 15px
    padding-bottom 10px
    background-color white
    display flex
    .imageTop {
        img {
            width: 80px
            height 81px
            background-size: cover
            background-repeat: no-repeat
        }
    }
    .logisticsDetail {
        padding-left 15px
        .logisticsStatus {
            p {
                font-weight bold
            }
        }
        .logisticsOrderNum {
            margin-top 5px
            p {
                font-size $font-size-desc
            }
        }
        .logisticsCourier {
            margin-top 5px
            p {
                font-size $font-size-desc
            }
        }
    }
}

.lineWrapper {
    padding-top 5px
    padding-left 15px
    padding-right 15px
    padding-bottom 5px
    background-color white
    margin-top 10px
    span {
        color $color-theme
    }
}

.logisticsDescContent {
    background-color white
    .contextWrapper {
        font-size $font-size-desc
        color black
    }
    .timeWrapper {
        margin-top 5px
        font-size $font-size-desc
        color $color-text-2
    }
}

</style>
